<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>派生，子代选择器</title>
		<style>
			/*6.派生选择器：后代选择器，用于选中祖先范围内所有匹配的子孙元素
			语法：任意选择器【祖先元素】任意选择器【祖先元素当中所有匹配子元素】{}
			*/
		   #header span{
			   display: block;
			   width: 50%;
			   background-color: #8f8f8f;
		   }
		   #header span:hover{
			   background-color: #00ff00;
		   }
		   /*7.子代选择器：通过父子关系元素，选择子元素
		   语法：任意选择器【父元素】任意选择器【父元素当中所有匹配子元素】{}
		   实现：选中左导航，颜色：#8f8f8f
		   */
		  #header>span{
			  background-color: #00ff00;
		  }
		</style>
	</head>
	<body>
		<div id="header">
			<span>左导航</span>
			<span>
				<div class="header">
			<span>右1导航</span>
			<span>右2导航</span>
			</div>
			</span>
			</div>
	</body>
</html>